<template>
  <div class="progresswrapper">
      <div class="mb"></div>
      <div class="pro"></div>
</div>

</template>


<script>
export default {
  name: "SeeksRelationGraphDemo",
  components: {},
  data() {
    return {
      user:{
        ip_in:""
      }
    };
  },
  created() {},

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

@keyframes progressbar{
  0% {
    background-position : 40px 0
  }
  100% {
    background-position : 0 0
  }
}


.progresswrapper{
    width : 600px;
    height : 30px;
    background : #FFFFFF;
    position : relative;

    
}

.mb{
    height: 30px;
    float: left;
    width: 90%;
    background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / 50%));
}
.pro{
  border-radius: 12px;
    width : 90%;
      height : 100%;
      background-image : linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
      background-color: #00B83F;
      background-size : 40px 40px;
      animation : progressbar 2s linear infinite;
}
      

</style>